<template>
    <el-tabs
        v-model="editableTabsValue"
        type="card"
        class="demo-tabs"
        @tab-remove="removeTab"
        @tab-click="skip"
    >
        <el-tab-pane
            v-for="item in editableTabs"
            :key="item.path"
            :label="item.title"
            :name="item.path"
            :closable="!isHomePage(item)"
        >
            <router-view v-if="item.path === editableTabsValue"></router-view>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElTabs, ElTabPane } from 'element-plus'

const HOME_PATH = '/home'
const HOME_TITLE = '首页'

const editableTabs = ref([
  { title: HOME_TITLE, path: HOME_PATH }
])
const editableTabsValue = ref(HOME_PATH)
const route = useRoute()
const router = useRouter()

// 1. 初始化时从localStorage恢复
const savedTabs = JSON.parse(localStorage.getItem('editableTabs') || 'null')
const savedActive = localStorage.getItem('editableTabsValue')
if (savedTabs && Array.isArray(savedTabs) && savedTabs.length > 0) {
  editableTabs.value = savedTabs
  editableTabsValue.value = savedActive || HOME_PATH
}

// 2. 监听变化，自动保存
watch([editableTabs, editableTabsValue], ([tabs, active]) => {
  localStorage.setItem('editableTabs', JSON.stringify(tabs))
  localStorage.setItem('editableTabsValue', active)
}, { deep: true })

function getTabTitle(route) {
  if (route.meta && route.meta.title) return route.meta.title
  return route.name || route.path
}

function isHomePage(tab) {
  return tab.path === HOME_PATH || tab.path === '/home/' || tab.path === '/home/dashboard'
}

watch(
  () => route.fullPath,
  (newPath) => {
    let matched = route.matched[route.matched.length - 1] || route
    let tabPath = route.fullPath
    let tabTitle = getTabTitle(matched)
    if (isHomePage({ path: tabPath })) {
      tabTitle = HOME_TITLE
      tabPath = HOME_PATH
    }
    // 首页tab始终存在
    if (!editableTabs.value.find(tab => isHomePage(tab))) {
      editableTabs.value.unshift({ title: HOME_TITLE, path: HOME_PATH })
    }
    // 其它tab
    if (!editableTabs.value.find(tab => tab.path === tabPath)) {
      if (!isHomePage({ path: tabPath })) {
        editableTabs.value.push({ title: tabTitle, path: tabPath })
      }
    }
    editableTabsValue.value = tabPath
  },
  { immediate: true }
)

function removeTab(targetPath) {
  if (isHomePage({ path: targetPath })) return // 禁止关闭首页
  const tabs = editableTabs.value
  const idx = tabs.findIndex(tab => tab.path === targetPath)
  editableTabs.value = tabs.filter(tab => tab.path !== targetPath)
  if (editableTabsValue.value === targetPath) {
    let nextTab = tabs[idx - 1] || tabs[0] || { path: HOME_PATH }
    editableTabsValue.value = nextTab.path
    router.push(nextTab.path)
  }
}

function skip(tab) {
  if (tab.props.name !== route.fullPath) {
    router.push(tab.props.name)
  }
}
</script>

<style>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
.demo-tabs {
    width: 100%;
    height: 100%;
}
</style>